<template>
    <d2-container>
        <template slot="header">提现统计
            <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    style="float: right; padding: 3px 0"
                    align="right"
                    @change="dateChange"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
        </template>
        <div class="inner">
            <ve-line
                    :data="chartData"
                    :legend="chartLegend"
                    :extend="chartExtend"
                    :settings="chartSettings"
                    :grid="chartGrid"
                    v-bind="pubSetting"
            ></ve-line>
        </div>
    </d2-container>
</template>

<script>
    import list from '@/components/charts/_mixin/list.js'


    export default {
        name: "CashOutStatisticsOfMonth",
        mixins: [
            list
        ],
        data() {

            this.chartLegend = {
                show: true,
                bottom: 5,
                left: 'center',
                orient: "horizontal"
            };
            this.chartGrid = {
                top: 20,
                left: 20,
                right: 20,
                bottom: 30
            };
            this.chartExtend = {
                series: {
                    barWidth: 10,
                    label: {
                        normal: {
                            show: true
                        }
                    }
                }
            };
            this.chartSettings = {
                labelMap: {
                    'applyAmount': '申请总额(元)',
                    'applyPerson': '申请人数',
                    'grantAmount': '发放总额(元)',
                    'grantPerson': '发放人数'
                }
            };
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                chartData: {
                    columns: ['date', "applyAmount", "applyPerson", "grantAmount", "grantPerson"],
                    rows: []
                },
                queryParams: {
                    startDate: '',
                    endDate: '',
                },
                dateRange: ''
            }
        },
        methods: {
            init() {
                //近7天贷款统计
                //活跃用户今日统计
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                this.dateRange = [start, end];

                // let params = {
                //   startDate: moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
                //   endDate: moment(new Date()).format('YYYY-MM-DD')
                // };
                this.getRecordsData();
            },
            getRecordsData() {

                let params = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange[1]
                };

                cashoutStatistics(params).then((res) => {
                    this.isLoading = false;
                    if (res.code === 100) {
                        this.chartData.rows = res.data.cashoutDetail;
                    } else {
                        this.$message.error(res.msg)
                    }
                });

            },
            dateChange(date) {
                this.dateRange = date;
                this.getRecordsData();
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style lang="scss" scoped>
    .inner {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

</style>
